import React, {PureComponent} from 'react';
import {connect} from 'dva';
// import StandardTable from 'components/GoodsTable';
import G from '../../utils/g';
import styles from '../Goods/GoodsList.less';
import {
  Row,
  Col,
  Card,
  Form,
  Input,
  Select,
  Icon,
  Button,
  Dropdown,
  Menu,
  InputNumber,
  DatePicker,
  Modal,
  message,
  Badge,
  Divider,
  Checkbox,
  Popconfirm,
  Table,
} from 'antd';

const FormItem = Form.Item;
const {Option} = Select;
const {RangePicker} = DatePicker;
const {TextArea} = Input;



@connect(({ goodsList, loading }) => ({
  goodsList,
  loading: loading.models.goodsList,
}))
@Form.create()
export default class GoodsModal extends PureComponent {
  state = {
    modalVisible: false,
    rowSelection: {
      getCheckboxProps: record => ({
        disabled: record.promoted, // Column configuration not to be checked
      }),
    }
  };

  componentDidMount = ()=>{
    const { dispatch, type} = this.props;
    let payload = {
      status : 1,
      havSku : 1, //需要取出SKU
    };
    this.id = G.getUrlValue('id') || '';
    if(type == 'discount' && this.id){
      payload.promotionId = this.id;
    }
    dispatch({
      type: 'goodsList/fetch',
      payload,
    });
    // dispatch({
    //   type: 'goodsList/getCategory',
    // });
    // dispatch({
    //   type: 'goodsList/getGroup',
    // });
  };

  handleStandardTableChange = (pagination, filtersArg, sorter) => {
    const { dispatch } = this.props;
    const { formValues } = this.state;

    const filters = Object.keys(filtersArg).reduce((obj, key) => {
      const newObj = { ...obj };
      newObj[key] = getValue(filtersArg[key]);
      return newObj;
    }, {});

    const params = {
      startIndex: (pagination.current - 1)* pagination.pageSize,
      pageSize: pagination.pageSize,
      ...formValues,
      ...filters,
      status : 1,
    };
    if (sorter.field) {
      params.sorter = `${sorter.field}_${sorter.order}`;
    }

    dispatch({
      type: 'goodsList/fetch',
      payload: params,
    });
    dispatch({
      type: 'goodsList/getCategory',
    });
  };

  handleSearch = e => {
    e.preventDefault();

    const { dispatch, form, type } = this.props;

    form.validateFields((err, fieldsValue) => {
      if (err) return;
      //
      // this.setState({
      //   formValues: values,
      // });

      dispatch({
        type: 'goodsList/fetchSearchArticle',
        payload: fieldsValue,
      });
    });
  };

  handleSelectRows = rows => {
    console.log(rows);
    // this.setState({
    //   selectedRows: rows,
    // });
    this.props.changeSelectedGoods(rows);
  };

  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        this.props.dispatch({
          type: 'form/submitRegularForm',
          payload: values,
        });
      }
    });
  };

  handleModalVisible = flag => {
    this.props.handleHide(flag);
  };

  handleOk = ()=>{
    this.props.handleOk();
  }

  render() {
    const { rowSelection} = this.state;
    const {modalVisible, selectedRows, onSelect} = this.props;
    const { goodsList: { searchArticleList}, loading, type } = this.props;
    const {getFieldDecorator, getFieldValue } = this.props.form;


    console.log('selectedRows',selectedRows);

    const formItemLayout = {
      labelCol: {
        xs: {span: 24},
        sm: {span: 7},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 12},
        md: {span: 10},
      },
    };

    const submitFormLayout = {
      wrapperCol: {
        xs: {span: 24, offset: 0},
        sm: {span: 10, offset: 7},
      },
    };

    const columns = [
      {
        title: '图片',
        render: (val, record)=> {
          return <img src={record.cover} width="100" height={60}/>
        }
      },
      {
        title: '标题',
        dataIndex: 'title',
      },
      {
        title: '描述',
        dataIndex: 'summary',
      },
      {
        title: '作者',
        dataIndex: 'authorName',
      },
      {
        title: '选择',
        render: (val,records)=>{
          return <a href="javascript:;" onClick={()=>{onSelect(records)}}>选择</a>
        }
      }
    ];

    return (
      <Modal
        title={ '选择文章'}
        width={900}
        visible={modalVisible}
        onOk={this.handleModalVisible}
        onCancel={()=>{this.handleModalVisible(false)}}
        footer={type == 'groupGoods' ? [
          <Button key="back" onClick={()=>{this.handleModalVisible(false)}}>取消</Button>,
          <Button key="submit" type="primary" onClick={this.handleOk}>
            确定
          </Button>,
        ] : null}
      >
        <Form onSubmit={this.handleSearch} layout="inline" style={{marginBottom:'16px'}}>
          <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
            <Col md={24} sm={24} style={{textAlign:'right'}}>
              <FormItem label="文章标题">
                {getFieldDecorator('title')(<Input placeholder="请输入" />)}
              </FormItem>
              <span className={styles.submitButtons} style={{marginTop:'3px',display:'inline-block'}}>
                <Button type="primary" htmlType="submit">
                  查询
                </Button>
              </span>
            </Col>
          </Row>
        </Form>
        {/*
        <StandardTable
          rowSelection = { rowSelection }
          selectedRows={selectedRows}
          loading={loading}
          data={searchArticleList}
          columns={columns}
          onSelectRow={this.handleSelectRows}
          onChange={this.handleStandardTableChange}
          handleOk = { this.handleSureSelect}
        />
        */}
        <Table
          loading={loading}
          rowKey={'id'}
          rowSelection={false}
          dataSource={searchArticleList}
          columns={columns}
          pagination={false}
        />
      </Modal>
    );
  }
}
